<template>
	<div>
  <el-dialog width="60%"  center :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="true" :close-on-press-escape="true" >
    <el-form :disabled="extendsParam" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="110px" >
		
	  <div class="inlineItem" >
		  <el-form-item prop="serverHost" :label="$t('serverInfo.serverHost')" >
		    <el-input size="mini" v-model="dataForm.serverHost" :placeholder="$t('serverInfo.serverHost')"></el-input>
		  </el-form-item>
		  <el-form-item prop="serverUsername" :label="$t('serverInfo.serverUsername')" >
				<el-input size="mini" v-model="dataForm.serverUsername" :placeholder="$t('serverInfo.serverUsername')"></el-input>
		  </el-form-item>
		  <el-form-item prop="serverPassword" :label="serverPasswordType" >
				<el-input  type="password"  autocomplete="new-password"  size="mini" v-model="dataForm.serverPassword" :placeholder="$t('serverInfo.serverPasswordType')">
					<el-button width='20' title="证书登录,请上传证书文件" slot="append" icon="el-icon-upload" @click="uploadPem()"></el-button>
				</el-input>
		  </el-form-item>
		  <el-form-item prop="serverPort" :label="$t('serverInfo.serverPort')" >
		    <el-input-number  :min="1" size="mini" v-model="dataForm.serverPort" :placeholder="$t('serverInfo.serverPort')"></el-input-number>
		  </el-form-item>
	  </div>
	  
	  <div class="inlineItem" >
		<el-form-item prop="usePurpose" :label="$t('serverInfo.usePurpose')" >
			<el-input size="mini" v-model="dataForm.usePurpose" :placeholder="$t('serverInfo.usePurpose')"></el-input>
		</el-form-item>
		<el-form-item prop="serverOsInf" :label="$t('serverInfo.serverOsInf')" >
			<el-input size="mini" v-model="dataForm.serverOsInf" :placeholder="$t('serverInfo.serverOsInf')"></el-input>
		</el-form-item>
		<el-form-item  prop="cloudProvider" :label="$t('serverInfo.cloudProvider')">
		  <ren-select size="mini" v-model="dataForm.cloudProvider" paramCode="cloud_provider"></ren-select>
		</el-form-item>
		<el-form-item prop="status" :label="$t('status')" size="mini">
		  <el-radio-group v-model="dataForm.status">
		    <el-radio :label="1">{{ $t('status1') }}</el-radio>
		    <el-radio :label="0">{{ $t('status0') }}</el-radio>
		  </el-radio-group>
		</el-form-item>
	  </div>
	  
	  
	  <div class="inlineItem" >
		<el-form-item prop="cloudUsername" :label="$t('serverInfo.cloudUsername')" >
			<el-input size="mini" v-model="dataForm.cloudUsername" :placeholder="$t('serverInfo.cloudUsername')"></el-input>
		</el-form-item>
		<el-form-item prop="cloudPassword" :label="$t('serverInfo.cloudPassword')" >
			<el-input autocomplete="new-password" type="password" size="mini" v-model="dataForm.cloudPassword" :placeholder="$t('serverInfo.cloudPassword')"></el-input>
		</el-form-item>
		<el-form-item prop="serverKey" :label="$t('serverInfo.serverKey')">
			<el-input size="mini" v-model="dataForm.serverKey" :placeholder="$t('serverInfo.serverKey')"></el-input>
		</el-form-item>
		<el-form-item prop="serverSecret" :label="$t('serverInfo.serverSecret')">
			<el-input size="mini" v-model="dataForm.serverSecret" :placeholder="$t('serverInfo.serverSecret')"></el-input>
		</el-form-item>
	  </div>
	  
	  <el-form-item prop="remark" :label="$t('remark')">
	    <el-input v-model="dataForm.remark" :placeholder="$t('remark')"></el-input>
	  </el-form-item>
      
    </el-form>
	
	
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button v-if="!isOnlyRead" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
	
	
  </el-dialog>
  <upload okFileType='pem' upUrl="/common/upload/uploadFileToLocal" v-if="uploadVisible" ref="upload" @refreshDataList="getPemUrl"></upload>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {  isMobile } from '@/utils/validate'
import Upload from '../oss/oss-upload'
export default {
  data () {
    return {
      visible: false,
	  isOnlyRead: false,
	  uploadVisible: false,
	  serverPasswordType: "服务器密码",
	  
      dataForm: {
        id: '',
        serverHost: '',
        serverUsername: '',
		serverPassword: '',
        serverPort: 22,
        cloudProvider: '',
		usePurpose: '',
		serverOsInf: '',
		status: 1,
		
        cloudUsername: '',
        cloudPassword: '',
        serverSecret: '',
		serverKey: '',
		remark:''
      }
    }
  },
  props:{
	  extendsParam:{
		  type: Boolean,
		  default: false
	  }
  },
  computed: {
    dataRule () {
      return {
        serverHost: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        serverUsername: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
        serverPassword: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
		serverPort: [
		  { required: true, message: this.$t('validate.required'), trigger: 'blur' }
		],
		cloudProvider: [
		  { required: true, message: this.$t('validate.required'), trigger: 'blur' }
		],
		usePurpose: [
		  { required: true, message: this.$t('validate.required'), trigger: 'blur' }
		],
		serverOsInf: [
		  { required: true, message: this.$t('validate.required'), trigger: 'blur' }
		]
      }
    }
  },
  components: {
    Upload
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
		if (this.dataForm.id) {
			this.getInfo()
		}
      })
	  this.isOnlyRead = this.extendsParam;
    },
    // 获取信息
    getInfo () {
		var url = this.isOnlyRead ? 'simpleGet' : 'get';
      return this.$http.get('/pc/serverInfo/'+url,{params:{id:this.dataForm.id}}).then(({ data: res }) => {
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...res.data,
        }
		if( res.data.isPem ){
			this.serverPasswordType = '服务器私钥'
		}else{
			this.serverPasswordType = '服务器密码'
		}
      }).catch(() => {})
       
    },
	getPemUrl(pemu){
		this.dataForm.serverPassword = pemu[0]
	},
	uploadPem(){
		this.uploadVisible = true
		this.$nextTick(() => {
		  this.$refs.upload.init()
		})
	},
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
		
		var url = !this.dataForm.id ? '/pc/serverInfo/add' : '/pc/serverInfo/modify';
	
		
        this.$http['post'](url, {
          ...this.dataForm,
        }).then(({ data: res }) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">

.inlineItem {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: flex-start; 
	align-items: center; 
}
.inlineItem label {
	line-height: 30px
}

</style>
